<template>
  <div class="header-menu">
    <el-menu
      :default-active="activePath"
      mode="horizontal"
      router
      class="el-menu-nav"
      text-color="#fff"
      active-text-color="#ffd04b"
      background-color="rgb(16, 90, 45)"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-submenu index="/search" :show-timeout="0" :hide-timeout="0">
        <template slot="title">搜索与分析</template>
        <el-menu-item index="/search">物种名称</el-menu-item>
        <el-menu-item index="/search">物种地区</el-menu-item>
        <el-menu-item index="/search">生态类群</el-menu-item>
        <el-menu-item index="/search">网格编号</el-menu-item>
      </el-submenu>
      <el-submenu index="/wiki" :show-timeout="0" :hide-timeout="0">
        <template slot="title">生物百科</template>
        <el-menu-item index="/wiki">宣教资源</el-menu-item>
        <el-menu-item index="/wiki">宣传画册</el-menu-item>
        <el-menu-item index="/wiki">保护站介绍</el-menu-item>
      </el-submenu>
      <el-submenu index="/houses" :show-timeout="0" :hide-timeout="0">
        <template slot="title">科普馆</template>
        <el-menu-item index="/houses">标本馆</el-menu-item>
        <el-menu-item index="/houses">影像馆</el-menu-item>
        <el-menu-item index="/houses">模型馆</el-menu-item>
      </el-submenu>
      <el-submenu index="/help" :show-timeout="0" :hide-timeout="0">
        <template slot="title">联系与帮助</template>
        <el-menu-item index="/help">联系我们</el-menu-item>
        <el-menu-item index="/help">数据帮助</el-menu-item>
        <el-menu-item index="/help">工具与应用帮助</el-menu-item>
        <el-menu-item index="/help">浏览所有文章</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  computed: {
    activePath() {
      return this.$route.path || '/home'
    },
  },
};
</script>

<style lang="scss">
.header-menu{
  .el-menu-nav{
    flex: 1;
    min-width: 0;
    background: none !important;
    &.el-menu.el-menu--horizontal{
      border-bottom: none;
    }
    .el-menu-item, .el-submenu .el-submenu__title{
      height: 50px;
      line-height: 50px;
      background: none !important;
    }
  }
}

.el-menu--horizontal{
  .el-submenu__title{
    background: none !important;
  }
  .el-menu-item{
    &:hover{
      background-color: var(--primary-color-dark) !important;
    }
  }
}
</style>